<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
	<style>
		html,body{height: 100%;background: white;}
		@media screen and (-webkit-min-device-pixel-ratio:1.5) {
      .aui-bar-nav,.aui-list{background: transparent;}
      .aui-bar-nav .aui-btn .aui-iconfont{color:#959595;}
      .aui-list .aui-list-item {
  			border-bottom: 1px solid #bbb;
  	        background-size: 100% 0px;
  		}
      .login_input{border: none;background: transparent;}
      .aui-list.aui-form-list .aui-list-item{padding: .1rem;}
      .aui-list.aui-form-list .aui-list-item:active{background: transparent;}

      .login_input input{height: 2.5rem;font-size: 1rem;line-height: 2.5rem;border: none;}
      .aui-list .aui-list-item-label-icon{color:#bbb;}
      /*.login_input .aui-list-item-label-icon,.login_input input{color:#fff;}*/
      .aui-content-padded .lgbtn{background: #F73D71;color:#fff;border-radius:1.5rem;}
      .lgbtn:active{background: #ff435b;color:#fff;}
      .lgbtn.wxbtn{border-color: #44b549;color:#44b549;}
      .login_input input::-webkit-input-placeholder{color:#bbb;}
      .login_input input:-moz-placeholder{color:#bbb;}
      .login_input input::-moz-placeholder{color:#bbb;}
      .login_input input:-ms-input-placeholder{color:#bbb;}
      .aui-content-padded h6{color:#AAAAAA;text-align: center;margin: 0.5rem 0}
      .aui-content-padded ul{
        width:200px;text-align: center;color: #AAAAAA;margin: 0 auto;
      }
      .aui-content-padded ul li{
        float: left;width: 50%;text-decoration: underline;
      }
      #header{
        color: #0C0C0C;background: white;box-shadow: 0px 3px 5px #ccc;
      }
      .show{display: block;}
      .hide{display: none;}
      button, .aui-btn{
        border-radius: 1.5rem;background: transparent;
      }
		}
	</style>
</head>
<body>
    <section class="aui-content aui-margin-t-15 aui-padded-15">
      <ul class="aui-list aui-form-list login_input">
        <li class="aui-list-item">
          <div class="aui-list-item-inner">
              <div class="aui-list-item-label-icon">
                  <i class="aui-iconfont aui-icon-mobile"></i>
              </div>
              <div class="aui-list-item-input">
                  <input type="tel" id="mobile" placeholder="请输入您的手机号" maxlength="11">
              </div>
          </div>
        </li>
        <li class="aui-list-item">
          <div class="aui-list-item-inner">
              <div class="aui-list-item-label-icon">
                  <i class="aui-iconfont aui-icon-cert"></i>
              </div>
              <div class="aui-list-item-input">
                  <input type="tel" placeholder="请输入验证码" autocomplete="off" id="smscode" maxlength="5">
              </div>
              <div class="aui-list-item-label aui-margin-r-5" style="width: 8rem;border-radius: 1.5rem;overflow: hidden;border: 1px solid #ccc;">
                  <div class="aui-btn codebtn1" style="width: 6rem;color: #999;background:white;" id="getcode" onclick="SendSms(this)">获取验证码</div>
                  <div class="aui-btn codebtn2 hide" style="width: 6rem;color: #999;" id="codejqs">计时器</div>
              </div>
          </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-my"></i>
                </div>
                <div class="aui-list-item-input">
                    <input type="text" id="invite_code" placeholder="请输入邀请码(选填)" >
                </div>
            </div>
        </li>
      </ul>
    </section>
    <section class="aui-content-padded">
        <div class="aui-btn aui-btn-block lgbtn jb" id="jb" tapmode onclick="Submit(this)">登 录</div>
    </section>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js" ></script>
<script type="text/javascript" src="../script/common.js" ></script>
<script type="text/javascript">
    apiready = function(){
      api.parseTapmode();
    }
    //提交
    function Submit(){
      var mobile = $api.byId('mobile').value;
      var smscode = $api.byId('smscode').value;
      var invitecode = $api.byId('invite_code').value;
      if (!window.regex_mobile.test(mobile)) {
        _toast('请输入正确的手机号');
        return false;
      }
      if (smscode<=0) {
        _toast('请输入验证码');
        return false;
      }
      var invite_code = '';
      if (invitecode!=='') {
          invite_code = invitecode;
      }
      var device_model = api.deviceModel;
      var device_id = api.deviceId;
      _loading('登录中...','',true);
      _Ajax(window.APIServer.SmsLogin,'post',{values:{mobile:mobile,smscode:smscode,invite_code:invite_code,device_model:device_model,device_id:device_id}},'json',function(ret){
          _loading_close();
          if (ret.code==1) {
              var uinfo = ret.data;
              //存储用户信息
              _SetPrefs('token', uinfo.token);
              _SetPrefs('uid', uinfo.uid);
              _SetPrefs('uinfo', uinfo);
              //广播事件：用户登录成功
              _SendEvent('UserLogin', uinfo.uid);
              _toast('登录成功！');
              setTimeout(function() {
                   api.closeToWin({
                       name : 'root'
                   });
              }, 500)
          }else{
              _toast(ret.msg);
          }

      });
    }
    //获取验证码
    function SendSms(){
      var mobile = $api.byId('mobile').value;
      if (!window.regex_mobile.test(mobile)) {
        _toast('请输入正确的手机号');
        return false;
      }
      _Ajax(window.APIServer.SendSms,'post',{values:{mobile:mobile}},'json',function(ret){
        _toast(ret.msg);
        showtime(60);
      });

    }
    //.计时器
    function showtime(t) {
      for ( i = 1; i <= t; i++)
      {
        window.setTimeout("update(" + i + "," + t + ")", i * 1000);
      }
    }
    function update(num, t) {
      if (num == t) {
        $api.addCls( $api.dom( '.codebtn2' ), 'hide' );
        $api.removeCls( $api.dom( '.codebtn1' ), 'hide' );
        $api.text($api.byId("getcode"), '重新获取');
      }
      else
      {
        printnr = t - num;
        $api.addCls( $api.dom( '.codebtn1' ), 'hide' );
        $api.removeCls( $api.dom( '.codebtn2' ), 'hide' );
        $api.text($api.byId("codejqs"), '('+printnr + " 's)");
      }
    }
</script>
</html>
